<template>
	<view class="page">
		<view class="money-box">
			<view class="money-item">
				<text>余额</text>
				<text>{{ account_info.balance }}</text>
			</view>
			<view class="money-item">
				<!-- 跟着类型变化的数据 -->
				<text>{{ $lang('common.' + show_account_type) }}</text>
				<text>{{ account_info[(show_account_type)] }}</text>
			</view>
		</view>
		<view class="form-box">
			<view class="form-item">
				<text class="item-title">当前账号</text>
				<text class="item-msg">{{newuser_phone}}</text>
			</view>
			<view class="form-item">
				<text class="item-title">转出类型</text>
				<view class="class-check">
					<view class="check-item" v-for="(item,index) in pay_class" :key="index" @click="pay_class_check(item)" :class="item==account_type?'active':''">
						<text>{{ $lang('common.' + item) }}</text>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-master">
					<text class="item-title">收款手机</text>
					<input confirm-type="next" type="number" v-model="phone" placeholder="必填" class="phone" @input="test_phone()" />
				</view>
				<view class="phone_footer">
					<text :class="phone_tishi=='手机号错误'||phone_tishi=='该用户不存在' ||phone_tishi=='请输入手机号查询'?'color-fail':'color-success'">{{phone_tishi}}</text>
				</view>
			</view>
			<view class="form-item">
				<view class="form-master">
					<text class="item-title">转出数量</text>
					<input confirm-type="next" type="digit" v-model="monry_num" placeholder="必填" class="phone" @input="test_money()" />
				</view>
				<view class="phone_footer">
					<text :class="money_tishi=='请输入转出数量'||money_tishi=='不可转出'?'color-fail':'color-success'">{{money_tishi}}</text>
				</view>
			</view>
			<view class="form-item">
				<view class="form-master">
					<text class="item-title">转出备注</text>
					<input confirm-type="done" type="text" v-model="note" placeholder="选填" class="phone footer-inp" />
				</view>
			</view>
		</view>
		<button type="default" class="sue-btn" @click="submit()">提交</button>
		<view class="footer-msg">
			<view class="footer-title">
				说明:
			</view>
			<view class="footer-text">
				<text class="text-num">1.</text>
				<text class="text-text">{{pay_star}}星以上才能转出积分!</text>
			</view>
			<view class="footer-text">
				<text class="text-num">2.</text>
				<text class="text-text">积分转出限制{{pay_num}}/每用户。</text>
			</view>
			<view class="footer-text">
				<text class="text-num">3.</text>
				<text class="text-text">建议在付款备注处填写转账原因。</text>
			</view>
		</view>
		<jpKeyboard ref="jpKeyboard1" keyType="two" @inputPwd="Getpassword" @backspace="del_password"></jpKeyboard>
	</view>
</template>

<script>
	import jpKeyboard from '@/components/jp-keyboard/jp-keyboard.vue';
	export default {
		components: {
			jpKeyboard
		},
		data() {
			return {
				money: '', //余额
				integral: '', //积分
				newuser_phone: '', //当前账号
				phone: '', //手机号
				phone_tishi: '请输入手机号查询',
				phone_check: false,
				monry_num: '',
				money_tishi: '请输入转出数量',
				money_check: false,
				note: '', //备注
				pay_class: [], //支付类型
				account_type: 'point', //账户类型
				show_account_type:'point',//右上角显示的账户类型
				account_data: 0,
				pay_star: 1,
				pay_num: 0,
				submit_msg: {
					pay_check: 0
				},
				password: '',
				//账户信息
				account_info: {
					balance: 0.00,
					point: 0,
					red_point: 0,
					junzheng_ticket: 0,
				},
			}
		},
		onLoad(options) {
			//默认某一种转账类型
			if(options.account_type){
				this.pay_class_check(options.account_type);
			}
			if (uni.getStorageSync('token')) {
				this.getMemberInfo()
				this.Getmsg()
				this.GetMsg2()
			} else {
				this.$util.redirectTo('/pages/member/index/index');
			}

		},
		methods: {
			test_phone() {
				if (this.phone_tishi == '') {
					this.phone_tishi = '请输入手机号'
				}
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
				if (reg_tel.test(this.phone.trim())) {
					console.log('通过')
					this.Getpayee_msg()
				} else {
					this.phone_tishi = '手机号错误'
				}
			},
			test_money() {
				let input_num = parseFloat(this.monry_num)
				if (input_num == '' || input_num == 0) {
					this.money_tishi = '请输入转出数量'
					this.money_check = false
				} else if (this.account_type == 'point') {
					// 积分
					if (input_num > parseFloat(this.account_info.point) || input_num > parseFloat(this.pay_num)) {
						this.money_tishi = '不可转出'
						this.money_check = false
					} else {
						this.money_check = true
						this.money_tishi = ''
					}
				} else if (this.account_type == 'red_point') {
					// 红积分
					if (input_num > parseFloat(this.account_info.red_point)) {
						this.money_tishi = '不可转出'
						this.money_check = false
					} else {
						this.money_check = true
						this.money_tishi = ''
					}
				} else if (this.account_type == 'balance') {
					// 余额
					if (input_num > parseFloat(this.account_info.balance)) {
						this.money_tishi = '不可转出'
						this.money_check = false
					} else {
						this.money_check = true
						this.money_tishi = ''
					}
				} else if (this.account_type == 'junzheng_ticket') {
					// 君政券
					if (input_num > parseFloat(this.account_info.junzheng_ticket)) {
						this.money_tishi = '不可转出'
						this.money_check = false
					} else {
						this.money_check = true
						this.money_tishi = ''
					}
				}
			},
			submit() {
				if (this.money_check && this.phone_check) {
					this.$refs.jpKeyboard1.toOpen()
				} else {
					uni.showToast({
						title: '请检查填写信息',
						icon: 'none'
					})
				}
			},
			// 输入密码完成
			Getpassword(e) {
				this.password = e
				this.sue_submit()
			},
			del_password() {},
			sue_submit() {
				this.$api.sendRequest({
					url: '/api/membertransfer/apply',
					data: {
						transfer_money: this.monry_num,
						transfer_type: this.account_type,
						mobile: this.phone,
						remark: this.note,
						pay_password: this.password
					},
					success: res => {
						console.log(res)
						if (res.code == 0) {
							uni.showToast({
								title: '转出成功~',
							})
							setTimeout(() => {
								this.$util.goBack();
								//this.$util.redirectTo('/otherpages/member/wallet/wallet');
							}, 500)
						} else {
							if (res.error_code == 'PAY_PASSWORD_NOT_SET') {
								uni.showModal({
									title: '支付密码未设置',
									content: '是否要去设置',
									success: (res) => {
										if (res.confirm) {
											this.$util.redirectTo('/otherpages/member/pay_password/pay_password', {
												back: '/otherpages/transfer/transfer'
											});
										}
									}
								}); 
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						}
					}
				});
			},
			// 获取收款人信息
			Getpayee_msg() {
				this.$api.sendRequest({
					url: '/api/member/getRealname',
					data: {
						mobile: this.phone
					},
					success: res => {
						console.log(res)
						if (res.code == 0) {
							this.phone_tishi = res.data.show_name
							this.phone_check = true
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							this.phone_tishi = res.message
						}
					}
				});
			},
			pay_class_check(account_type) {
				//账户类型
				this.account_type = account_type;
				this.show_account_type = account_type == 'balance' ? 'point' : account_type;
				this.test_money()
			},
			// 基本信息
			Getmsg() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						console.log(res)
						if (res.code == 0) {
							this.money = res.data.balance
							this.account_info = res.data;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				});
			},
			// 配置信息
			GetMsg2() {
				this.$api.sendRequest({
					url: '/api/Membertransfer/config',
					success: res => {
						console.log(res)
						if (res.code == 0) {
							let class_item = res.data.value.transfer_type.split(",")
							this.pay_class = class_item
							this.pay_star = res.data.value.level
							this.pay_num = res.data.value.limit
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				});
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							console.log(res)
							this.newuser_phone = res.data.mobile
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: white;
		height: 100vh;

		.money-box {
			height: 250rpx;
			// background-image: linear-gradient(to bottom right, #ED018C, #EB2C9D);
			background-color: #FF335C;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.money-item {
				color: white;
				font-size: 35rpx;
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding: 0 23rpx;
				padding-bottom: 20rpx;

				text:last-child {
					font-size: 42rpx;
				}
			}
		}

		.form-box {
			padding-bottom: 60rpx;

			.form-item {
				border-bottom: 2rpx solid #F8F8F8;
				height: 70rpx;
				line-height: 70rpx;
				display: flex;
				align-items: center;
				padding: 18rpx 23rpx;
				padding-left: 0;
				margin-left: 23rpx;
				justify-content: space-between;

				.form-master {
					display: flex;
					align-items: center;

					.item-title {
						width: 140rpx;
						font-size: 30rpx;
					}

					.phone {
						width: 320rpx;
						margin-left: 14rpx;
						font-size: 30rpx;
						text-align: left;
					}

					.footer-inp {
						width: 550rpx;
					}
				}

				.phone_footer {
					.color-fail {
						color: #FF335C;
					}

					.color-success {
						color: #1CD66C;
					}
				}

				.item-msg {
					font-size: 28rpx;
				}

				.class-check {
					display: flex;
					align-items: center;

					.check-item {
						margin-left: 15rpx;
						border: 2rpx solid #FF335C;
						padding: 0 10rpx;
						color: #FF335C;

						text {
							letter-spacing: 2rpx;
						}
					}

					.active {
						background-color: #FF335C;
						color: white;
					}
				}

			}
		}

		.sue-btn {
			background-image: linear-gradient(to right, #F63F3D, #ED018A);
			border-radius: 10rpx;
			margin: 0 23rpx;
			color: white;
			font-size: 32rpx;
			letter-spacing: 4rpx;
		}

		.footer-msg {
			margin-top: 55rpx;
			padding: 0 23rpx;

			.footer-title {
				color: #000000;
				font-size: 32rpx;
			}

			.footer-text {
				color: #909399;
				font-size: 28rpx;

				.text-num {
					padding-right: 6rpx;
				}

				.text-text {}
			}
		}
	}
</style>
<style scoped>

</style>
